<template>
  <div class="content">
    <div class="switch-text">切换至</div>
    <div class="switch-text">切换至</div>
    <div v-if="!isTask" class="switch-button btn-task" @click="taskTap">
      任务单
    </div>
    <div
      v-if="isTask"
      class="switch-button btn-detection"
      @click="detectionTap"
    >
      检验单
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const emit = defineEmits(["taskType"]);
let user = window.localStorage.getItem("user");
user = JSON.parse(user);

//强制赋值操作员身份（后端返回有区分）
if(user.identityType == 2){
  user.identityType = 1;
}

const isTask = ref(user.identityType == 1);

emit("taskType", isTask.value);
/** 任务单点击 */
const taskTap = () => {
  isTask.value = true;
  emit("taskType", true);
};

/** 检验单点击 */
const detectionTap = () => {
  isTask.value = false;
  emit("taskType", false);
};
</script>

<style lang="scss" scoped>
.content {
  width: 300px;
  height: 70px;
  border-radius: 35px;
  background-color: #93d2f4;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  .switch-text {
    font-size: 23px;
    color: #7f7f7f;
    font-weight: bold;
  }
  .switch-button {
    height: 50px;
    width: 140px;
    background-color: white;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 23px;
    cursor: pointer;
  }
  .btn-task {
    position: absolute;
    top: 10px;
    left: 10px;
  }
  .btn-detection {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}
</style>
